<template>
  <div class="page">
    <div class="top">
      <div class="top-content">
        <div class="title-wrap">
          <span class="text">{{$t('customOrder.customOrder')}}</span>
          <span class="hint">{{$t('customOrder.requiredFields')}}</span>
        </div>
        <p>{{$t('customOrder.hint1')}}</p>

        <p>{{$t('customOrder.hint2')}}</p>

        <p>{{$t('customOrder.hint3')}}</p>
      </div>
    </div>

    <div class="content">
      <Alert type="success" show-icon>
        {{$t('customOrder.hint4')}}
        <Icon type="ios-alert-outline" slot="icon" />
        <div slot="desc">
          <div class="platform-list">
            <div class="item" v-for="(item, index) in config.ecommerceList" :key="index">
              <img class="platform-logo" :src="item.flagImg" alt="">
              <span class="platform-name">{{item.text}}</span>
            </div>
          </div>
        </div>
      </Alert>
      <div class="content-item select-address">
        <shipping-address @on-change="onSelectAddr">
          <div slot="title" class="title-wrap">
            <span class="title"><span class="required-text">*</span>{{$t('pay.selectShippingAddress')}}</span>
          </div>
        </shipping-address>
      </div>
      <div class="content-item">
        <div class="title-wrap">
          <span class="title"> {{$t('customOrder.goodsImage')}}</span>
          <span class="hint">{{$t('customOrder.hint5')}}</span>
        </div>
        <div class="product-image">
          <div class="image-list">
            <div class="image-item" v-for="(item, index) in urlImageList">
              <img :src="item" alt="">
              <span @click="removeImage(index)" class="iconfont icon-shanchu"></span>
            </div>
          </div>
          <Upload
              v-if="urlImageList.length >= 5 ? false : true"
              :show-upload-list="false"
              :headers="{
                'X-Access-Token': userToken,
                'lang': 'en_US'
                 }"
              biz="chat"
              :data="{
             biz: 'custom'
           }"
              name="file"
              :disabled="uploadLoading"
              :max-size="3072"
              :before-upload="handleBeforeUpload"
              :on-progress="onProgress"
              :on-success="onSuccess"
              :on-exceeded-size="handleMaxSize"
              :action="uploadURL"
          >
            <div class="upload">
              <t-loading v-if="uploadLoading"></t-loading>
              <div v-else>
                <img class="image" src="@/assets/images/public/upload-image.png" alt="">
                <span class="text">{{$t('customOrder.hint6')}}</span>
              </div>
            </div>
          </Upload>
        </div>
      </div>

      <div class="content-item">
        <div class="title-wrap">
          <span class="title"><span class="required-text">*</span>{{$t('customOrder.remark')}}</span>
        </div>
        <Input type="textarea" v-model="form.remarks" :autosize="{minRows: 4,maxRows: 5}"
               :placeholder="$t('customOrder.noteProductDescriptionSpecifications')"></Input>

      </div>
      <div class="content-item price-item">
        <div class="title-wrap">
          <span class="title"><span class="required-text">*</span>{{$t('customOrder.contactInformation')}}</span>
        </div>
        <Row>
          <Col span="11">
            <Input v-model="form.contact" :placeholder="$t('customOrder.contactInformation')" />
          </Col>
        </Row>
        <p class="input-hint">{{$t('customOrder.whatsAppWechat')}}</p>
      </div>
      <div class="content-item price-item">
        <div class="title-wrap">
          <span class="title"><span class="required-text">*</span>{{$t('customOrder.priceRange')}}</span>
        </div>
        <Row>
          <Col span="11">
            <Input v-model="form.minPrice" :placeholder="$t('customOrder.minPrice')" />
          </Col>
          <Col span="2" style="text-align: center; display: flex;align-items: center;justify-content: center">-</Col>
          <Col span="11">
            <Input v-model="form.maxPrice" :placeholder="$t('customOrder.maxPrice')" />
          </Col>
        </Row>
      </div>
      <div class="content-item">
        <div class="title-wrap">
          <span class="title"><span class="required-text">*</span>{{$t('customOrder.quantity')}}</span>
        </div>
        <InputNumber v-model="form.quantity" :min="1" controls-outside></InputNumber>
      </div>
      <div class="content-item price-item">
        <div class="title-wrap">
          <span class="title"><span class="required-text">*</span>{{$t('customOrder.freightCny')}}</span>
        </div>
        <Row>
          <Col span="11">
            <Input v-model="form.expressFee" :placeholder="$t('customOrder.freight')" />
          </Col>
        </Row>
      </div>
      <div class="service-charge">{{$t('customOrder.hint7',{appName: appName, amount: form.expressFee})}}</div>

    </div>

    <div class="footer">
      <p>{{$t('customOrder.hint8')}}</p>
      <div class="agreement-wrap">
        <router-link :to="`/notice/${shopAgentAgreement.id}`" target="_blank" class="agreement">{{$t('customOrder.purchasingInstructions')}}</router-link>
        <!--        <router-link :to="`/notice/${exchangeAgreement.id}`" target="_blank" class="agreement">{{$t('customOrder.afterSalesService')}}</router-link>-->
        <div class="checkbox">
          <Checkbox v-model="single">{{$t('customOrder.agree')}}</Checkbox>
        </div>
      </div>
      <div class="btn-wrap">
        <Button @click="onCreateCustomize" class="btn" :loading="loading" type="primary" type-size="oversized">
          {{$t('customOrder.submitNow')}}
        </Button>
        <Button v-if="false" class="btn" type-size="oversized" type="primary">加入购物车</Button>
      </div>
    </div>
    <Modal class="pop"
           class-name="vertical-center-modal"
           width="480" v-model="successPop"
           :title="$t('customOrder.viewOrder')">
      <div class="pop-label">{{$t('customOrder.myOrderPageViewOrder')}}</div>
      <div slot="footer">
        <Button @click="successPop = false">{{$t('public.cancel')}}</Button>
        <Button type="primary" @click="toUserOrder">
          {{$t('public.confirm')}}
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {createCustomize} from "@/api/order";
import {commonUpload} from "@/api/sys";
import TLoading from "@/components/t-loading";
import {mapState} from "vuex";
import ShippingAddress from "@/views/main/submit-parcel/shipping-address";
export default {
  name: "index",
  components: {ShippingAddress, TLoading},
  data() {
    return {
      appUrl: process.env.VUE_APP_API,
      successPop: false, // 成功弹窗
      loading: false,
      appName: process.env.VUE_APP_NAME,
      single: false,
      uploadLoading: false,
      urlImageList: [], // 上传图片完整链接用来展示
      imageList: [], // 上传的图片列表
      uploadURL: commonUpload(),
      userToken: localStorage.getItem('USER_TOKEN'),
      form: {
        addressId: '',
        contact: '', // 用户联系方式
        maxPrice: '', // 最高价格
        minPrice: '', // 最低价格
        imageList: '', // 图片路径
        quantity: 1, //数量
        remarks: '', //备注
        expressFee: 10 //价格
      }
    }
  },
  computed: {
    ...mapState({
      config: state => state.config.config,
      shopAgentAgreement: (state) => {
        // 代购须知
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_SHOP_AGENT;
        }
        return obj;
      },
    })
  },
  methods: {
    onSelectAddr(info) {
      // 选择的地址
      this.form.addressId = info.id;
    },
    toUserOrder() {
      // 前往我的订单
      this.$router.push('/user/order');
    },
    removeImage(index) {
      // 删除图片
      this.imageList.splice(index, 1);
      this.urlImageList.splice(index, 1);
    },
    onProgress(event, file, fileList) {
      // console.log('上传的钩子',event, file, fileList)
    },
    handleMaxSize (file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.urlImageList.push(data.url);
        this.imageList.push(data.path);
      } else {
        this.$Message.error(response.message);
      }
    },
    onError(error, file) {
      this.$Message.error(this.$t('user.uploadFailure'));
    },
    handleBeforeUpload(file) {
      this.uploadLoading = true;
    },
    onCreateCustomize() {
      // 需求单(定制)接口
      if (!this.single) {
        this.$Message.error(this.$t('customOrder.purchaseInstructions'));
        return false;
      }
      this.form.imageList = this.imageList;
      this.loading = true;
      createCustomize(this.form).then((res)=>{
        this.loading = false;
        this.successPop = true;
      }).catch(()=>{
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="less">
.page {
  .top {
    background: #f0f9ff;
    .top-content {
      width: 1200px;
      margin: 0 auto;
      padding: 40px 0;
      .title-wrap {
        margin-bottom: 24px;
        .text {
          color: @t-title-color;
          font-size: 32px;
          font-weight: 500;
        }
        .hint {
          color: @primary-color;
          font-size: 18px;
          font-weight: 500;
        }
      }
      p {
        color: @t-text-color;
        font-size: 16px;
        margin-top: 4px;
      }
    }
  }
  .content {
    width: 1200px;
    margin: 40px auto;
    border-bottom: 1px solid @t-table-border-color;
    padding-bottom: 16px;
    .content-item {
      margin-top: 40px;
      .title-wrap {
        margin-bottom: 8px;
        .title {
          color: @t-title-color;
          font-size: 14px;
          font-weight: 500;
          .required-text {
            color: red;
          }
        }
        .hint {
          margin-left: 16px;
          color: #999999;
          font-size: 14px;
        }
      }
      .select-address {
        .title-wrap {
          margin-bottom: 0;
        }
      }
      .input-hint {
        margin-top: 4px;
        color: @t-title-color;
        font-size: 12px;
      }
      .product-image {
        display: flex;
        .image-list {
          display: flex;
          .image-item {
            position: relative;
            margin-right: 6px;
            width: 192px;
            height: 192px;
            border-radius: 4px;
            overflow: hidden;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .iconfont {
              position: absolute;
              cursor: pointer;
              right: 6px;
              bottom: 6px;
              color: @t-text-color;
            }
          }
        }
        .upload {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 192px;
          height: 192px;
          border-radius: 4px;
          opacity: 1;
          border: 1px solid rgba(0,0,0,0.15);
          padding: 0 20px;
          cursor: pointer;
          .image {
            display: block;
            width: 48px;
            margin: 0 auto;
          }
          .text {
            display: block;
            margin-top: 8px;
            text-align: center;
            color: @t-title-color;
            font-size: 14px;
          }
        }
      }
    }
    .platform-list {
      display: flex;
      .item {
        margin-right: 6px;
        text-align: center;
        .platform-logo {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
        .platform-name {
          display: block;
          color: @t-text-color;
          font-size: 14px;
          line-height: 12px;
        }
      }
    }
    .price-item {
      width: 50%;
    }
    .service-charge {
      display: block;
      margin-top: 40px;
      color: @t-title-color;
      font-size: 14px;
    }
  }
  .footer {
    width: 1200px;
    margin: 0px auto;
    margin-bottom: 80px;
    .agreement-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 14px 0;
      p {
        color: @t-title-color;
        font-size: 14px;
      }
      .agreement {
        margin-left: 16px;
        cursor: pointer;
        color: @primary-color;
        font-size: 14px;
      }
      .checkbox {
        margin-left: 16px;
      }
    }
    .btn-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .btn {
        width: 140px;
        margin-left: 16px;
      }
    }
  }
}
</style>